<template>
  <div class="custom-body" :style="borderStyle">
    <!--  模版头  -->
    <default-column-header v-if="showHeader" :temp="temp" />
    <!--  内容部分   -->
    <div class="custom-content" :style="contentStyle">
      <div v-if="column" class="custom-ul-header" :style="assistColor">
        <el-row :gutter="5">
          <el-col v-for="(item,index) in column" :key="'label-'+index" :span="item.width">{{ item.label }}</el-col>
        </el-row>
      </div>
      <el-empty v-if="dataList === null || dataList.length === 0" :image-size="100" />
      <template v-else>
        <div
          v-for="(obj,index) in dataList"
          :key="'obj-'+index"
          class="custom-ul-li"
          :style="lineStyle"
          @click="openEntity(obj)"
        >
          <el-row :gutter="5" :style="borderColumn">
            <el-col v-for="(item,num) in column" :key="'td-'+num" :span="item.width">
              {{ obj[item.column] }}
            </el-col>
          </el-row>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { template } from '@/mixins/template'
import { layout } from '@/mixins/layout'
import DefaultColumnHeader from '@/portal4.1/pc/component/column/DefaultColumnHeader.vue'
export default {
  name: 'PcNewListTempV1',
  components: { DefaultColumnHeader },
  mixins: [template, layout],
  computed: {
    lineStyle() {
      return { '--font-color': this.layoutTheme.menuColor, '--font-active-color': this.layoutTheme.menuActiveColor, '--back-color': this.layoutTheme.menuActiveBackground }
    }
  }
}
</script>

<style lang="scss">
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  overflow: hidden;
}
.custom-content {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.custom-ul-header {
  font-weight: 600;
  text-align: left;
}
.custom-ul-li {
  color: var(--font-color);
}
.custom-ul-li:hover {
  color: var(--font-active-color);
  background-color: var(--back-color);
}
.custom-ul-li, .custom-ul-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
[class*="el-col-"] {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--assist-color);
  font-size: 0.9rem;
}
</style>
